<template>
    <div class="wrapper">
        <top-header title="救援服务"></top-header>
        <div class="wrapper">
            <bui-cell label="联系人" >
                <input type="text" class="car_info_input" v-model="form.ownername" placeholder="请输入联系人"/>
            </bui-cell>
            <bui-cell label="联系方式" >
                <input type="number" class="car_info_input" max-length="11" v-model="form.ownerphone" placeholder="请输入联系方式"/>
            </bui-cell>
            <bui-cell label="救援地址" >
                <input type="text" class="car_info_input" v-model="form.adress" placeholder="请输入救援地址" />
            </bui-cell>

            <div class="button">
                <wxc-button text="立即救援"
                            @wxcButtonClicked="next" :btnStyle="btnStyle"></wxc-button>
            </div>
        </div>
    </div>
</template>
<script>
import { WxcButton,wxcGridSelect } from 'weex-ui';
import { buiCell} from 'bui-weex';
import utilFunc from '../../utils/util'
var amap = weex.requireModule('amap');
amap.initAmap('5442d6dc648cc739792f38c71db540c3');
import header from '../../common/header'
export default {
    components: { WxcButton,buiCell, 'top-header': header, },
    data () {
        return {
            address:'',
            token: '',
            btnStyle: {
                'background-color': '#1E90FF',
            },
            form: {
                'uid': '', // 用户id
                'ownerphone': '',  // 联系方式
                'ownername': '',  // 车主
                'adress': '',  // 救援地址
                // 'province':'',
                // 'city':''
            },
            servicePage: {
                "limit": 10,
                "order": "asc",
                "page": 1,
                "sort": "id",
                "uid": '', // 100068
            },
        }
    },
    created () {
        let user = this.$storage.getSync('UserInfo')
        this.form.ownerphone = user.mobile
        this.cityTop = Number.parseInt(this.statusBarHeight || weex.config.env.statusBarHeight || 40);
        console.log("test-----------------------" + this.cityTop);
        console.log("test--------------1112---------" + this.cityTop);
        const vm = this;

        vm.$geo.get().then(data => {
            console.log(":::::::::::::::::::::::: Lng :" + data.locationLng)
            const lUrl = 'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' + data.locationLng + ',' + data.locationLat + '&key=450bfc326ae7a1b49a2c82c3d716e2b9&radius=1000&extensions=all'

            // 示例
            vm.$fetch({
                method: 'GET',    // 大写
                // name: 'common.getInfo', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                url: lUrl,
                data: {
                    count: 1
                }
            }).then(resData => {

                // vm.$notice.alert({
                //     message:resData
                // })
                console.log("-----------------------------"+JSON.stringify(resData))
                console.log("-----------------------------"+resData.location)
                // 成功回调
                console.log(resData.regeocode.addressComponent.province);
                // this.form.province = resData.regeocode.addressComponent.province;
                // this.form.city = resData.regeocode.addressComponent.city;
                this.form.adress = resData.regeocode.formatted_address;

                console.log(typeof city);
                const ty = (typeof addr);
                console.log(ty);
                const reg = /(市|省|自治区)$/g;

                if(typeof city == 'string'){
                    vm.location = city.replace(reg, "");
                } else {
                    vm.location = addr.replace(reg, "");
                }

                vm.fun(vm.location, '', '', '');

                const ZUrl = 'https://restapi.amap.com/v3/config/district?keywords=' + this.location + '&subdistrict=2&key=450bfc326ae7a1b49a2c82c3d716e2b9';

                vm.$fetch({
                    method: 'GET',    // 大写
                    // name: 'common.getInfo', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                    url: encodeURI(ZUrl),
                    data: {
                        count: 1
                    }
                }).then(resData => {
                    if(resData.districts.length > 1 ){
                        console.log(resData.districts[1].districts);
                        vm.areaData = [{
                            'title': '全部',
                            'value': '',
                            'checked': true
                        }];
                        const areaList = resData.districts[1].districts;
                        areaList.forEach( ( item, i ) => {
                            console.log( item, i );
                            let tmp = {};
                            tmp = {"title": item.name, 'value': item.name};
                            vm.areaData.push(tmp);
                        } );

                    } else if (this.location == "") {
                        // vm.areaData = [];
                        vm.areaData = [{
                            'title': '全部',
                            'value': '',
                            'checked': true
                        }];
                        const areaList = resData.districts[0].districts;
                        areaList.forEach( ( item, i ) => {
                            console.log( item, i );
                            let tmp = {};
                            tmp = {"title": item.name, 'value': item.name};
                            vm.areaData.push(tmp);
                        } );
                    }


                }, error => {
                    console.log("::::::::::::::::: 1")
                    // 错误回调
                    console.log(error)
                })

            }, error => {
                console.log(":::::::::::::::::2")
                // 错误回调
                console.log(error)
            })
        }, error => {
            console.log("::::::::::::::::: 3")
            console.log(error)
        })
    },
    mounted () {
    },
    methods: {
        // 返回
        back () {
            this.$router.back();
        },

        next () {
            if (!this.validterParam()) {
                return
            }
            const vm = this;
            var userInfo = this.$storage.getSync('UserInfo');

            this.token = userInfo.token;
            this.$fetch({
                method: 'POST',    // 大写
                name: 'service.rescue.create', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: this.form,
                header: {
                    'X-TMACW-APP-Token': vm.token
                }
            }).then(resData => {
                // vm.$notice.alert({
                //     message:resData
                // })
                // 成功回调
                this.isShowLoad = false;
                console.log(resData)
                if(resData && resData.errno == 0){
                    this.$notice.toast({ message: '救援申请提交成功'})
                    this.back()
                }
            }, error => {
                // 错误回调
                this.isShowLoad = false;
                console.log(error)
            })

        },
        // 校验值
        validterParam () {
            if (!this.form['ownername']) {
                this.$notice.toast({ message: '请填写联系人'})
                return false
            } else if (!this.form['ownerphone']) {
                this.$notice.toast({ message: '请填写联系方式'})
                return false
            } else if (!this.form['adress']) {
                this.$notice.toast({ message: '请填写救援地址'})
                return false
            } else if (!utilFunc.checkIsHasSpecialStr(this.form['ownername'])) {
                this.$notice.toast({ message: '联系人姓名只能是汉字或字母'})
                return false
            }
            return true
        },
    }
}
</script>
<style>
    .iconfont {
        font-family: iconfont;
    }
    .wrapper{
        background-color: #fff;
    }
    .car_info_input{
        width: 500px;
        border-style: solid;
        border-width: 1px;
        border-color: #fff;
        border-radius: 5px;
        height: 70px;
        line-height: 70px;
        padding-left: 10px;
        outline-color: #fff;
    }
    .button{
        align-items: center;
        margin-top: 40px;
        margin-bottom: 40px;
    }

</style>
